* {
    margin: 0;
    padding: 0;
    }

    #container {
    margin: 100px auto;
    width: 688px;
    }
    #write {
    margin: 0 0 5px;
    padding: 5px;
    width: 671px;
    height: 100px;
    font: 2em/1.5 Verdana, Sans-Serif;
    background: #fff;
    text-align: center;
    border: 1px solid #f9f9f9;
    }
    #keyboard {
    margin: 0;
    padding: 0;
    list-style: none;
    }
        #keyboard li {
        float: left;
        margin: 0 5px 5px 0;
        width: 40px;
        height: 40px;
        line-height: 40px;
        text-align: center;
        background: #fff;
        border: 1px solid #f9f9f9;
        }
            .capslock, .tab, .left-shift {
            clear: left;
            }
                #keyboard .tab, #keyboard .delete {
                width: 70px;
                }
                #keyboard .capslock {
                width: 80px;
                }
                #keyboard .return {
                width: 77px;
                }
                #keyboard .left-shift {
                width: 95px;
                }
                #keyboard .right-shift {
                width: 109px;
                }
            .lastitem {
            margin-right: 0;
            }
            .uppercase {
            text-transform: uppercase;
            }
            #keyboard .space {
            clear: left;
            width: 681px;
            }
            .on {
            display: none;
            }
            #keyboard li:hover {
            position: relative;
            top: 1px;
            left: 1px;
            border-color: #e5e5e5;
            cursor: pointer;
            }